<template>
	<el-card>
		<el-row :gutter="20" justify="space-between">
			<el-col :span="15">
				<div style="display: flex; flex-direction: row">
					<el-avatar :size="60" :src="userStore.user.avatar" />
					<div style="display: flex; flex-direction: column; margin-left: 20px; line-height: 28px">
						<h1>你好，{{ userStore.user.realName }}，这是您的评估概览</h1>
						<div>今天是否有完成任务！</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</el-card>
	<br />

	<el-space fill wrap :fill-ratio="28" style="width: 100%">
		<el-card style="width: 350px;height: 500px;">
			<div style="height: 100%; display: flex; justify-content: center">
				<div ref="main1" style="width: 100%; height: 500px"></div>
			</div>
		</el-card>

		<el-card style="width: 500px;height: 500px;">
			<div style="height: 100%; display: flex; justify-content: center">
				<div ref="main2" style="width: 100%; height: 500px"></div>
			</div>
		</el-card>
	</el-space>

	<br />
	<br />
	<el-card>
	</el-card>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue'
import { getStuHome } from '@/api/smstu/task'
import * as echarts from 'echarts'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const main1 = ref<HTMLElement>()
const main2 = ref<HTMLElement>()
let myChart1: echarts.ECharts | null = null
let myChart2: echarts.ECharts | null = null

const initCharts = async () => {
  // 确保数据加载完成
  const res = await getStuHome()
  const data = res.data

  // 销毁旧实例
  if (myChart1) myChart1.dispose()
  if (myChart2) myChart2.dispose()

  // 初始化图表1
  myChart1 = echarts.init(main1.value!)
  const option1 = {
    title: { text: '学习成果评估图' },
    legend: { data: ['我的学习成果评估', '班级平均学习成果评估'] },
    radar: {
      indicator: [
        { name: '知识掌握', max: 100 },
        { name: '阅读理解', max: 100 },
        { name: '技能应用', max: 100 },
        { name: '问题解决', max: 100 },
        { name: '创新能力', max: 100 }
      ]
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: [
            data.radar.knowMaster,
            data.radar.readUnderstand,
            data.radar.skillApplication,
            data.radar.problemSolve,
            data.radar.innovationAbility
          ],
          name: '我的学习成果评估',
          areaStyle: {
            color: 'rgba(114, 188, 218, 0.2)',
            shadowBlur: 5,
            shadowColor: 'rgba(0, 0, 0, 0.3)'
          }
        },
        {
          value: [
            data.radar.classKnowMaster,
            data.radar.classReadUnderstand,
            data.radar.classSkillApplication,
            data.radar.classProblemSolve,
            data.radar.classInnovationAbility
          ],
          name: '班级平均学习成果评估',
          areaStyle: {
            color: 'rgba(145, 204, 117, 0.2)',
            shadowBlur: 5,
            shadowColor: 'rgba(0, 0, 0, 0.3)'
          }
        }
      ]
    }]
  }
  myChart1.setOption(option1)

  // 初始化图表2
  myChart2 = echarts.init(main2.value!)
  const option2 = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.taskNameList
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      interval: 10
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    series: [{
      data: data.scoreList,
      type: 'line',
      areaStyle: {}
    }]
  }
  myChart2.setOption(option2)

  // 窗口resize监听
  window.addEventListener('resize', () => {
    myChart1?.resize()
    myChart2?.resize()
  })
}

onMounted(() => {
  initCharts()
})

onBeforeUnmount(() => {
  // 清理资源
  window.removeEventListener('resize', () => {
    myChart1?.resize()
    myChart2?.resize()
  })
  myChart1?.dispose()
  myChart2?.dispose()
})
</script>

